<template>
  <div ref="imageWrapper">
    <a-card title="查询条件" class="search">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model ref="ruleForm" :model="queryParam" layout="inline"
                      @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :span="20">
              <a-col :span="8">
                <a-form-model-item label="填报表名称">
                  <a-input v-model="queryParam.name" placeholder="请输入采集表名称"/>
                </a-form-model-item>
              </a-col>
              <template v-if="toggleSearchStatus">
<!--                <a-col :span="7">
                  <a-form-item label="报告期类型">
                    <j-dict-select-tag placeholder="请选择报告期类型" v-model="queryParam.reportPeriod"
                                       dictCode="template_report_type"/>
                  </a-form-item>
                </a-col>-->
                <a-col :span="7">
                  <a-form-model-item label="填报表版本">
                    <a-input addon-before="V" type="Number" :step="0.1" :min="1" v-model="queryParam.version"
                             placeholder="请输入填报表版本"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="发布日期">
                    <j-date placeholder="请选择开始日期" class="query-group-cust" v-model="queryParam.createTime"></j-date>
                    <span class="query-group-split-cust"></span>
                    <j-date placeholder="请选择结束日期" class="query-group-cust" v-model="queryParam.endTime"></j-date>
                  </a-form-item>
                </a-col>
              </template>
            </a-col>
            <a-col :span="4">
              <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" icon="search" class="yellow_search_btn" @click="searchQuery">查询</a-button>
                <a-button icon="reload" class="clear_btn" @click="searchReset">清除条件</a-button>
                   <a @click="handleToggleSearch">
                   <a-button class="clear_btn"> 高级搜索  <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/></a-button>
              </a>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card style="margin-top: 20px">
      <!--      <template slot="title"><span style="font-weight: bold">模板列表</span></template>-->
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">
        <template slot="status" slot-scope="text, record">
          <a-tag v-if="text=='0'" color="orange">
            未填报
          </a-tag>
          <a-tag v-if="text=='1'" color="blue">
            已填报
          </a-tag>
          <a-tag v-if="text=='2'" color="#2db7f5">
            已上报
          </a-tag>
          <a-tag v-if="text=='3'" color="#f50">
            已退回
          </a-tag>
          <a-tag v-if="text=='4'" color="green">
            已完成
          </a-tag>
          <a-tag v-if="text=='5'" color="red">
            已过期
          </a-tag>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button @click="OnPerview(record)" style="margin-left:5px">预览</a-button>
          <a-button @click="OnInform(record)" style="margin-left:5px">填报</a-button>
          <a-popconfirm title="是否上报？" @confirm="() => OnUp(record)">
            <a-button :loading="sbloading" style="margin-left:5px">上报</a-button>
            <!--            :disabled="record.status!='1'"-->
          </a-popconfirm>
        </template>
      </a-table>
      <PerviewModal ref="perviewModal" @ok="modalFormOk"></PerviewModal>
    </a-card>
  </div>

</template>

<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction, httpAction} from '@/api/manage'

  import columns from './columns'
  import PerviewModal from "./perview/PerviewModal";

  export default {
    components: {
      PerviewModal,
    },
    mixins: [JeecgListMixin],
    data() {
      return {
        sbloading:false,
        queryParam: {},
        superParam: {},
        url: {
          list: '/sjcj/dataCollectionTask/list'
        },
        columns: columns(),
      }
    },
    computed: {},
    created() {
    },
    watch: {},
    methods: {
      OnPerview(record) {
        this.$refs.perviewModal.edit(record)
        this.$refs.perviewModal.title = `${record.name}（v ${record.version}）`
        this.$refs.perviewModal.disableSubmit = true
      },
      OnInform(record) {
        this.$refs.perviewModal.edit(record)
        this.$refs.perviewModal.title = `${record.name}（v ${record.version}）`
        this.$refs.perviewModal.disableSubmit = false
      },
      async OnUp(record) {
        this.sbloading = true
        let that = this
        let res = await getAction('/sjcj/dataCollectionTask/check', {taskId: record.id})
        if (res.code === 500) {
          that.$confirm({
            title: '提示',
            content: `${res.message}，是否继续上报？`,
            onOk() {
              that.apiUp(record)
            },
            onCancel() {
              that.sbloading = false
            }
          });
        } else {
          that.apiUp(record)
        }
      },
      apiUp(record) {
        httpAction('/sjcj/dataCollectionTask/edit', {
          id: record.id,
          status: '2'
        }, 'put').then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.loadData()
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.sbloading = false
        })
      }
    },
  }
</script>
<style lang="less" scoped>
  @import '~@assets/less/tableTheme.less';

  .search {
    background: url(/img/search_bg.204329a9.png) 100% 100%;
  }

</style>
